<template>
  <el-dialog
    v-el-drag-dialog
    :title="!dataForm.id ? '新增' : '查看'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="60%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="注册时间:" prop="addTime">
              <span>{{dataForm.addTime}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="营业时间:" prop="msn">
              <textarea v-model="dataForm.msn" placeholder="营业时间"></textarea>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="会员名称:" prop="trueName">
              <span>{{dataForm.trueName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="会员账号:" prop="username">
              <span>{{dataForm.username}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="会员负责人:" prop="realName">
              <span>{{dataForm.realName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="会员类型:" prop="userType">
              <el-select v-model="dataForm.userType" placeholder="上级类型">
                <el-option
                v-for="item in dataForm.usertypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                disabled>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="会员Mobile:" prop="mobile">
              <span>{{dataForm.mobile}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="审核意见:" prop="checkComment">
              <textarea v-model="dataForm.checkComment" placeholder="审核意见"></textarea>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="会员主图:" prop="mainImgSrc">
              <el-upload
              :action="this.$http.adornUrl(`/user/business/uploadImg?token=${this.$cookie.get('token')}`)"
              list-type="picture-card"
              :file-list="dataForm.mainImgSrc"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              :on-exceed="onExceed"
              :limit="1">
              <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="营业证件:" prop="licensePic">
              <el-upload
              :action="this.$http.adornUrl(`/user/business/uploadImg?token=${this.$cookie.get('token')}`)"
              list-type="picture-card"
              :file-list="dataForm.licensePic"
              :on-preview="handlePreview"
              :on-success="handleSuccess1"
              :on-remove="handleRemove1"
              :on-exceed="onExceed1"
              :limit="1">
              <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="会员地址:" prop="address">
              <span>{{dataForm.address}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="会员描述:" prop="description">
              <span>{{dataForm.description}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="现金券余额:" prop="integral">
              <span>{{dataForm.integral}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="推广余额:" prop="commissionMoney">
              <span>{{dataForm.commissionMoney}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="总金额/元:" prop="balanceMoney">
              <span>{{dataForm.balanceMoney}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="未提现/元:" prop="notExtract">
              <span>{{dataForm.notExtract}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="已提现/元" prop="yesExtract">
              <span>{{dataForm.yesExtract}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="上级名称" prop="paNUserTrueName">
              <span>{{dataForm.paNUserTrueName}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="上级账号" prop="paNUserName">
              <span>{{dataForm.paNUserName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="上级负责人" prop="paRealName">
              <span>{{dataForm.paRealName}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="上级类型" prop="paNUserType">
              <el-select v-model="dataForm.paNUserType" placeholder="上级类型">
                <el-option
                v-for="item in dataForm.usertypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                disabled>
               </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="店铺抽成佣金" prop="storeCommission">
              <span>{{dataForm.storeCommission}}%</span>
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        dataForm: {
          id: 0,
          addTime: '',
          msn: '',
          trueName: '',
          username: '',
          realName: '',
          userType: '',
          mobile: '',
          checkComment: '',
          address: '',
          description: '',
          integral: '',
          commissionMoney: '',
          balanceMoney: '',
          notExtract: '',
          yesExtract: '',
          paNUserTrueName: '',
          paNUserName: '',
          paRealName: '',
          paNUserType: '',
          mainImgSrc: [],
          licensePic: [],
          mainImgPath: '',
          mainImgName: '',
          licenseImg: '',
          photoId: '',
          storeCommission: '',
          usertypeOptions: [{
            value: 0,
            label: '未知'
          }, {
            value: 1,
            label: '区域运营商'
          }, {
            value: 2,
            label: '普通联盟店'
          }, {
            value: 3,
            label: '消费者'
          }, {
            value: 4,
            label: 'VIP会员'
          }, {
            value: 5,
            label: '中级版联盟店'
          }, {
            value: 6,
            label: '高级版联盟店'
          }, {
            value: 7,
            label: '城市合伙人'
          }, {
            value: 8,
            label: '城市合伙人联盟店'
          }]
        },
        dataRule: {
        }
      }
    },
    methods: {
      // 图片预览
      handlePreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
       // 文件上传成功的钩子函数
      handleSuccess (res, file, fileList) {
        this.$message({
          type: 'info',
          message: '图片上传成功',
          duration: 6000
        })
        if (res.code === 0) {
          // this.dataForm.mainImgPath = ''
          // this.dataForm.mainImgName = ''
          this.dataForm.mainImgSrc.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/business/' + res.data})
          this.dataForm.mainImgPath = 'business'
          this.dataForm.mainImgName = res.data
        }
      },
      // 删除文件之前的钩子函数
      handleRemove (file, fileList) {
        for (var i = 0; i < this.dataForm.mainImgSrc.length; i++) {
          var picc = this.dataForm.mainImgSrc[i]
          if (picc.url === file.url) {
            this.dataForm.mainImgSrc.splice(i, 1)
            this.dataForm.mainImg = ''
          }
        }
        this.$message({
          type: 'info',
          message: '已删除原有图片',
          duration: 6000
        })
      },
      // 上传的文件个数超出设定时触发的函数
      onExceed (files, fileList) {
        this.$message({
          type: 'info',
          message: '最多只能上传1个图片',
          duration: 6000
        })
      },
       // 文件上传成功的钩子函数
      handleSuccess1 (res, file, fileList) {
        this.$message({
          type: 'info',
          message: '图片上传成功',
          duration: 6000
        })
        if (res.code === 0) {
          this.dataForm.licensePic.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/business/' + res.data})
          this.dataForm.licenseImg = 'business/' + res.data
        }
      },
      // 删除文件之前的钩子函数
      handleRemove1 (file, fileList) {
        for (var i = 0; i < this.dataForm.licensePic.length; i++) {
          var picc = this.dataForm.licensePic[i]
          if (picc.url === file.url) {
            this.dataForm.licensePic.splice(i, 1)
            this.dataForm.licenseImg = ''
          }
        }
        this.$message({
          type: 'info',
          message: '已删除原有图片',
          duration: 6000
        })
      },
      // 上传的文件个数超出设定时触发的函数
      onExceed1 (files, fileList) {
        this.$message({
          type: 'info',
          message: '最多只能上传1个图片',
          duration: 6000
        })
      },
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/user/business/getBusinessUserById/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.id = data.data.id
                this.dataForm.addTime = data.data.addTime
                this.dataForm.msn = data.data.msn
                this.dataForm.trueName = data.data.trueName
                this.dataForm.username = data.data.username
                this.dataForm.realName = data.data.realName
                this.dataForm.userType = data.data.userType
                this.dataForm.mobile = data.data.mobile
                if (data.data.path !== null && data.data.name !== null) {
                  let pic = data.data.path + '/' + data.data.name
                  this.dataForm.mainImgSrc.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/' + pic})
                  this.dataForm.mainImgPath = data.data.path
                  this.dataForm.mainImgName = data.data.name
                }
                if (data.data.path !== null && data.data.name == null) {
                  let pic = data.data.path
                  this.dataForm.mainImgSrc.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/' + pic})
                  this.dataForm.mainImgPath = pic
                  this.dataForm.mainImgName = ''
                }
                if (data.data.licensePic !== '' && data.data.licensePic != null) {
                  let pics = data.data.licensePic
                  this.dataForm.licensePic.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/' + pics})
                  this.dataForm.licenseImg = data.data.licensePic
                }
                this.dataForm.checkComment = data.data.checkComment
                this.dataForm.address = data.data.address
                this.dataForm.description = data.data.description
                this.dataForm.integral = data.data.integral
                this.dataForm.commissionMoney = data.data.commissionMoney
                this.dataForm.balanceMoney = data.data.balanceMoney
                this.dataForm.notExtract = data.data.notExtract
                this.dataForm.yesExtract = data.data.yesExtract
                this.dataForm.paNUserTrueName = data.data.paNUserTrueName
                this.dataForm.report = data.data.paNUserName
                this.dataForm.paRealName = data.data.paRealName
                this.dataForm.paNUserType = data.data.paNUserType
                this.dataForm.photoId = data.data.photoId
                this.dataForm.storeCommission = data.data.storeCommission
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/user/business/${!this.dataForm.id ? 'save' : 'modifyBusinessUserById'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'msn': this.dataForm.msn,
                'checkComment': this.dataForm.checkComment,
                'mainImgPath': this.dataForm.mainImgPath,
                'mainImgName': this.dataForm.mainImgName,
                'licensePic': this.dataForm.licenseImg,
                'photoId': this.dataForm.photoId
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
